<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .control{  width:300px; box-sizing: border-box;  }
            .content{  width:auto;  margin-left:300px;  height:900px;overflow-y:auto;}
            .fl{  float: left;  }
            .b{  border:1px solid black;  }
            .content-iframe{width:100%;}

            #target > div{border:1px solid silver;}
        </style>
        <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">

            (function($) {
                function EditHtml() {
                    var that = this;
                    //全局的变量
                    that.data = {
                        //被拖拽的元素
                        dragedDom: undefined,
                        //拖拽到达的目标元素
                        targetDom: undefined,
                        //目标元素的原来属性
                        preBorder: undefined,
                        //以下是必须参数
                        //编辑区的主区域--最大的范围的
                        target: undefined,
                        //被拖拽的区域
                        dragedArea: undefined,

                        //选择放置位置的操作模板
                        positionSelect:undefined
                    };


                }

                EditHtml.prototype.init = function (param) {
                        console.log(param);
                    var that = this;
                    for (var s in param) {
                        that.data[s] = param[s];
                    }

                    //初始化各个事件
                    var children = this.data.dragedArea.children;
                    console.log(children);
                    for (var i = 0; i < children.length; i++) {
                        var current = children[i];
                        console.log(i);
                        children[i].ondragstart = function (current,i) {
                            that.data.dragedDom =  this;
                        }
                    }

                    that.data.target.ondragenter = function (e) {
                        console.log("你来拉");
                        //通过属性存储模板
                        var id = that.data.dragedDom.getAttribute('content');
                        var html = document.getElementById(id).innerHTML;//存储在id 为 id的 script标签中 到时候也许可以直接存储在代码中 或者另外弄一个文件
                        var dom = that.parseStrToDom(html);

                        var parent = e.path[1];
                        var cur = e.path[0];
                        that.data.preBorder = cur.style.border;
                        cur.style.border = "1px solid red";
                        var children = parent.children;
                    };

                    that.data.target.ondragover = function (event) {
                        event.preventDefault();//这个很关键 要不然没有ondrop什么事
                    };

                    that.data.target.ondragleave = function (e) {
                        var cur = e.path[0];
                        cur.style.border = that.data.preBorder;
                    };

                    that.data.target.ondrop = function (e) {
                        e.preventDefault();
                        //console.log(e);
                        var cur = e.path[0];
                        cur.style.border = that.data.preBorder;
                        that.data.targetDom = cur;
                        that.showSelect();
                    };

                    that.data.target.onmousemove = function (e) {
                        //console.log(e);
                    };

                };

                EditHtml.prototype.parseStrToDom = function (str) {
                    var d = document.createElement('div');
                    d.innerHTML = str;
                    return d.children[0];
                };

                EditHtml.prototype.showSelect = function () {
                    var showTemplate = document.createElement('div');
                    showTemplate.innerHTML = that.data.positionSelect.innerHTML;
                    showTemplate.style.position = 'absolute';
                    showTemplate.style.width = '200px';
                    showTemplate.style.height = '200px';
                    showTemplate.style.left = '50%';
                    showTemplate.style.top = '50%';
                    showTemplate.style.marginLeft = '-100px';
                    showTemplate.style.marginTop = '-100px';
                    showTemplate.style.border = '1px solid red';
                    document.body.append(showTemplate);
                };

                EditHtml.prototype.addDom = function(obj){
                    var that = this;
                    var select = $("input[name='position-select']:checked").val();
                    var id = that.data.dragedDom.getAttribute('content');
                    var html = document.getElementById(id).innerHTML;
                    var dom = this.parseStrToDom(html);
                    switch (select){
                        case "1":
                            $(that.data.targetDom).before(dom);
                            break;
                        case "2":
                            $(that.data.targetDom).append(dom);
                            break;
                        case "3":
                            $(that.data.targetDom).after(dom);
                            break;
                        default :
                            break;
                    }
                    $(obj).parent().parent().remove();

                };

                window.editHtml = new EditHtml();
            })($);

            window.onload = function() {
                editHtml.init({
                    dragedArea: document.getElementById('toolbox'),
                    target: document.getElementById('target'),
                    positionSelect: document.getElementById("positionSelect")
                });
            }


        </script>
    </head>
    <body>
        <script type="text/html" id="positionSelect">
            <div style="border:1px solid red;box-sizing: border-box;padding-top:50px;">
                <form id="position">
                <div style="text-align:center;">选择位置</div>

                <input type="radio" name="position-select" value="1"/>前
                <input type="radio" name="position-select" value="2" checked/>中
                <input type="radio" name="position-select" value="3"/>后
                </form>
            </div>
            <div>
                <button onclick="editHtml.addDom(this)">确定</button><button onclick="$(this).parent().parent().remove();">取消</button>
            </div>
        </script>

        <script type="text/html" id="container">
            <div>新的容器</div>
        </script>

        <div style="width: 100%">
        <div class="control fl b">
            <div id="toolbox">
                <div draggable="true" id="div1" content="container">容器</div>
                <div draggable="true" id="div2" content="container">容器</div>
                <div draggable="true" id="div3" content="container">容器</div>
            </div>
        </div>
        <div id="target" class="content  b" >
            <div class="1"><div class="2">1</div></div>
            <div>2</div>
            <div>3</div>
        </div>
        </div>
    </body>

</html>